<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/normal.css"/>
		<link rel="stylesheet" type="text/css" href="css/global.css"/>
		<link rel="stylesheet" type="text/css" href="css/login.css"/>
	</head>
	<body>
		<div id="wrapper">
			<header>
				<!--the logo of page-->
				<div class="logo float_left">
					<a href="home.html"><img src="../images/logo.png"/></a>
				</div>
				<!--navigation of page-->
				<nav>
					<ul>
						<!--use sprite image and pseudo elements-->
						<li data-tooltip = 'Comic'><a href="home.html"></a></li>
						<li data-tooltip = 'Movie'><a href="home.html"></a></li>
						<li data-tooltip = 'Video'><a href="home.html"></a></li>
						<li data-tooltip = 'Game'><a href="home.html"></a></li>
						<li data-tooltip = 'Tv'><a href="home.html"></a></li>
						<li data-tooltip = 'More'><a href="home.html"></a></li>
					</ul>
				</nav>
				<!--user account : login or create new account-->
				<ul id="account" class="account float_right">
					<li><img src="../images/p1.png"/></li>
					<li id="login"><a href="">Bug Warm</a></li>
					<li></li>
				</ul>
			</header>
			<div id="login_box">
				<div class="create-account">
					<h2>New Customers</h2>
					<p>By creating an account in our store,you can be able to move
						through the checkout precess faster,store multiple shipping
						addresses,view and track your oreders in your account and more.
					</p>
					<a class="btn" href="register.html">create an account</a>
				</div>
				<div class="login-box-register">
					<h2>Registered Customers</h2>
					<p>
						if you havn an account with us,please log in.
					</p>
					<form action="" method="post">
						<ul>
							<li class="input">
								<label for = 'email'>Email Address*</label>
								<input type="email" name="email" id="email" value="" />
							</li>
							<li class="input">
								<label for = 'password'>Password*</label>
								<input type="password" name="password" id="password" value="" />
							</li>
							<li>
								<a href="">Forgor Your Password?</a>
								<input class="btn" type="submit" value="login"/>
							</li>
						</ul>
					</form>
				</div>
			</div>
			<footer>
				<div class="footer-decoration">
					<div class = 'decoration'></div>
				</div>
				<div id="footer_info">
					<div id="store_info" class="float_left">
						<img src="images/f_logo.png"/>
						<p>It is a long established fact that a reader will be distracted 
							by the readable content of a page.There are many variations of
							passages of Lorem Ipsum available, but the majority have suffered.</p>
					</div>
					<ul id="store_list" >
						<li>
							<h3>Categories</h3>
							<a href="">Dance</a>
							<a href="">History</a>
							<a href="">War</a>
						</li>
						<li>
							<h3>information</h3>
							<a href="">New products</a>
							<a href="">Top sellers</a>
							<a href="">Specials</a>
						</li>
						<li>
							<h3>Follow Us</h3>
							<a href="">Facebook</a>
							<a href="">Twitter</a>
							<a href="">Youtube</a>
							<p>@ 2017 Template by <span><a class="warning" href="">HuyaEr</a></span></p>
						</li>
					</ul>
				</div>
			</footer>
		</div>
		<script src="js/js.main.js"></script>
		<script src="js/js.normal.js"></script>
	</body>
</html>
